<template>
<div class="article">
    <div class="my-nav">
      <van-tabs  v-model="activeName" @click="shuax">
        <van-tab class="my-tab" v-for="item in mychannels" :title="item.name" :key="item.id" :name="item.id" ></van-tab>
      </van-tabs>
      <div class="btn-wrapper">
        <van-icon class="search" name="search" size="25" @click="showa = true"/>
        <van-icon class="ellipsis" name="ellipsis" size="25" @click="show = true"/>
      </div>
    </div>
       <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
       >
       <ArticleContent :item="item" v-for="item in list" :key="item.id"></ArticleContent>
      </van-list>
       </van-pull-refresh>
       <!--
        我的频道,频道选择
        -->
      <van-popup
       v-model="show"
       position="left"
       closeable
       :style="{ width: '100%', height: '100%' }"
       teleport=".ellipsis"
       @click-overlay="onClickOverlay"
       @click-close-icon="onClickCloseIcon"
       >
         <div class="article-channel">
           <div class="head">
             <h3>我的频道<small>点击进入频道</small></h3>
             <a class="edit" href="javascript:;">编辑</a>
           </div>
           <div class="body">
             <!-- <a href="javascript:;" class="active">推荐</a> -->
             <a href="javascript:;" @click="enterChannel(i.id)" :class="{active:activeName === i.id}" v-for="(i,index) in mychannels" :key="index">{{i.name}}</a>
           </div>
           <div class="head" style="margin-top:12px">
             <h3>频道推荐</h3>
           </div>
           <div class="body">
             <a href="javascript:;" v-for="(i,index) in optionalChannels" :key="index">{{i.name}}</a>
           </div>
         </div>
       </van-popup>
       <!--
         搜索框
        -->
      <van-popup
      v-model="showa"
      closeable:true
      position="right"
      :style="{ width: '100%', height: '100%' }"
      >
          <!-- v-model="value" -->
        <van-search
          show-action
          placeholder="请输入搜索关键词"
        >
          <!-- @search="onSearch" -->
          <template #left>
            <van-icon name="arrow-left" @click="showa = false"/>
          </template>
          <template #action>
            <div>搜索</div>
          </template>
        </van-search>
      </van-popup>
</div>
</template>

<script>
import ArticleContent from '@/components/ArticleContent.vue'
import { getChannels, getArticles } from '@/api/articl'
import { getUserchannels } from '@/api/user'

export default {
  name: 'ArticlePage',
  components: { ArticleContent },
  data () {
    return {
      showa: false,
      activeName: 0,
      // 导航栏
      channelsAll: [],
      timestamp: new Date(),
      // 内容
      list: [],
      loading: false,
      finished: false,
      show: false,
      isLoading: false,
      // 上下刷新
      count: 1,
      // 个人频道
      mychannels: []
    }
  },
  async created () {
    const res = await getChannels()
    console.log(res)
    this.channelsAll = res.data.data.channels

    // 点击  个人频道选择
    const ccc = await getUserchannels()
    // console.log(res)
    this.mychannels = ccc.data.data.channels

    const ddd = await getArticles({ channel_id: this.activeName, timestamp: this.timestamp })
    console.log(ddd)
    this.list = ddd.data.data.results
  },
  methods: {
    // 头顶频道内容切换
    async shuax () {
      const res = await getArticles({ channel_id: this.activeName, timestamp: this.timestamp })
      // console.log(ccc)
      this.list = res.data.data.results
    },
    // 上拉加载
    async onLoad () {
      const res = await getArticles({ channel_id: this.count, timestamp: this.timestamp })
      // console.log(res)
      this.list.push(...res.data.data.results)
      this.count++
      this.loading = false
    },
    onClickOverlay () {},
    onClickCloseIcon () {},
    // 下拉刷新
    async onRefresh () {
      const res = await getArticles({ channel_id: this.count, timestamp: this.timestamp })
      console.log(res)
      this.list.unshift(...res.data.data.results)
      this.count++
      setTimeout(() => {
        this.isLoading = false
      }, 200)
    },
    enterChannel (id) {
      this.activeName = id
      this.show = false
    }
  },
  computed: {
    // 可选频道
    optionalChannels () {
      // 在myChannels中找不到的就是可选的
      return this.channelsAll.filter(item => !this.mychannels.find(c => c.id === item.id))
    }
  }
}

</script>

<style lang="less" scoped>
.article {
   margin-bottom: 50px;
   margin-top: 45px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    background: #fff;
    }
  .van-tabs {
     padding-right: 86px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
   }
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content:space-evenly;

    &::before {
      padding: 0 10px;
      content: "";
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), #fff);
    }
  }

  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }

}
.article-channel {
  margin-top: 44px;
  .head {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    padding-bottom: 12px;
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      small {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .edit {
      float: right;
      height: 22px;
      width: 52px;
      line-height: 22px;
      text-align: center;
      color: #DE644B;
      border-radius: 11px;
      border: 1px solid #DE644B;
      font-size: 12px;
      &.active {
        color: #fff;
        background: #DE644B;
      }
    }
  }
  .body {
    padding: 0 6px 0 16px;
    a {
      display: inline-block;
      padding: 0 8px;
      font-size:14px;
      color: #3A3948;
      background: #F7F8FA;
      height: 36px;
      line-height: 36px;
      min-width: 78px;
      margin-right: 10px;
      margin-bottom: 12px;
      border-radius: 18px;
      text-align: center;
      &.active {
        color: #DE644B;
      }
    }
  }
}
</style>
